<template>
  <view>
    <view class="w100 pt-12 pl-20 pr-20">
      <!-- <uv-collapsePane-list :list="list" style="background-color: #F7F8FA;"></uv-collapsePane-list> -->
      <uv-collapsePanel :title="item.name" @toggle="change" style="color: #000;font-size: 28rpx;" v-for="(item,index) in list" :key="index">
        <uv-collapsePanel :title="item2.name" v-for="(item2,index2) in item.childList" :key="index2">
			<uv-collapsePanel :title="item3.name" v-for="(item3,index3) in item2.childList" :key="index3">
				<view class="w100 rowsb rowsm h-120 pl-20" v-for="(item4,index4) in item3.childList" :key="index4" @click="choseItem(item4)">
				  <view class="fs-28 col000">{{item4.name}}</view>
				  <view class="fs-28" style="color: #4878FF;">选择</view>
				</view>
			</uv-collapsePanel>
          
        </uv-collapsePanel>
      </uv-collapsePanel>
      <!-- <uv-collapsePanel title="父面板2">
        <uv-collapsePanel title="子面板1">
          <uv-collapsePanel title="孙面板1"></uv-collapsePanel>
          <uv-collapsePanel title="孙面板2"></uv-collapsePanel>
        </uv-collapsePanel>
        <uv-collapsePanel title="子面板2">
          <uv-collapsePanel title="孙面板3"></uv-collapsePanel>
          <uv-collapsePanel title="孙面板4"></uv-collapsePanel>
        </uv-collapsePanel>
      </uv-collapsePanel> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[]
      };
    },
    onLoad() {
      this.getList()
    },
    methods:{
      getList(){
        this.$tools.axiosFromToken('POST','prouser/getBj',{},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
		  let {data} = res
		  this.list = data
        })
      },
      change(e){
        console.log(e)
      },
      choseItem(item){
		  uni.$emit('choseClassItem',item)
		  this.$tools.goBack(1)
      }
    }
  }
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>